<template>
  <view class="container">
    <view class="header">
      <text class="title">代账记账系统</text>
      <text class="subtitle">{{ userInfo.name || '用户' }}，欢迎使用</text>
    </view>
    
    <view class="content">
      <view class="welcome-card">
        <text class="welcome-text">系统首页</text>
        <text class="desc">您已成功登录系统</text>
      </view>
      
      <view class="action-buttons">
        <button class="action-btn primary" @click="goToCustomers">客户管理</button>
        <button class="action-btn success" @click="goToPayments">收款记录</button>
        <button class="action-btn warning" @click="goToCollections">催收管理</button>
        <button class="action-btn info" @click="goToAccounting">记账管理</button>
      </view>
      
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup name="Home">
  import { computed, onMounted, getCurrentInstance } from 'vue'

  const instance = getCurrentInstance()
  const store = instance.appContext.config.globalProperties.$store
    
  // 计算属性
  const userInfo = computed(() => store.state.user.userInfo)
  
  // 页面加载时执行
  onMounted(() => {
    // 检查登录状态，如果未登录跳转到登录页
    checkLoginStatus()
  })
    
  const checkLoginStatus = () => {
    const token = uni.getStorageSync('token')
    if (!token) {
      // 未登录，立即跳转到登录页
      uni.reLaunch({
        url: '/pages/login/login'
      })
      return
    }
    
    // 如果store中没有用户信息，从本地存储恢复
    if (!userInfo.value) {
      store.user.checkLoginStatus()
    }
  }
  
  const goToCustomers = () => {
    uni.showToast({
      title: '客户管理功能开发中',
      icon: 'none'
    })
  }
  
  const goToPayments = () => {
    uni.showToast({
      title: '收款记录功能开发中',
      icon: 'none'
    })
  }
  
  const goToCollections = () => {
    uni.showToast({
      title: '催收管理功能开发中',
      icon: 'none'
    })
  }
  
  const goToAccounting = () => {
    uni.showToast({
      title: '记账管理功能开发中',
      icon: 'none'
    })
  }
  
  const handleLogout = () => {
    uni.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: (res) => {
        if (res.confirm) {
          store.user.logout()
        }
      }
    })
  }
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
  
  .title {
    display: block;
    font-size: 60rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
  
  .subtitle {
    font-size: 32rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.content {
  width: 100%;
  max-width: 600rpx;
  
  .welcome-card {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    text-align: center;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 40rpx;
    
    .welcome-text {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .desc {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
    margin-bottom: 40rpx;
    
    .action-btn {
      height: 88rpx;
      border: none;
      border-radius: 44rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #fff;
      
      &.primary {
        background: #667eea;
      }
      
      &.success {
        background: #19be6b;
      }
      
      &.warning {
        background: #ff9900;
      }
      
      &.info {
        background: #909399;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .logout-btn {
    width: 100%;
    height: 88rpx;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2rpx solid rgba(255, 255, 255, 0.3);
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .logout-btn:active {
    background: rgba(255, 255, 255, 0.1);
  }
}
</style>
